<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0px;
            cursor: pointer;
        }
        td{
            border: 1px solid black;
            padding: 2px 10px;
        }
        tr:hover{
            background-color: #dedede;
        }
        .row-detail{
            position: fixed;
            left: 0px;
            top: 0px;
            background-color: #333333;
            color: white;
            font-size: 14px;
            padding: 8px 20px;
            border-radius: 8px;
            box-shadow: 0px 0px 8px 0px #666666;
        }
        .model{
            display: none;
            position: fixed;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            background-color: rgba(51, 51, 51, 0.3);
            z-index: 9;
        }
        .content{
            text-align: right;
            /* 将块级元素的宽度设置为基于内容自动识别 */
            width: fit-content;
            padding: 12px 18px;
            box-sizing: border-box;
            box-shadow: 0px 0px 4px 0px #333333;
            border-radius: 8px;
            background-color: white;
            margin: 50px auto 0px auto;
        }
    </style>
    <script src="./jquery/jquery.js"></script>
    <script>
        function closeModel(){
            $("#editModel").css("display","none");
        }

        let students = [
            {
                "user_name": "顾平",
                "mobile": "13278448886",
                "email": "u.ggolrgrie@njwl.zr",
                "address": "新疆维吾尔自治区 克孜勒苏柯尔克孜自治州 乌恰县"
            },
            {
                "user_name": "段杰",
                "mobile": "13585121974",
                "email": "u.wwyaayat@omzl.bs",
                "address": "山东省 潍坊市 奎文区"
            },
            {
                "user_name": "蒋涛",
                "mobile": "18957301119",
                "email": "s.gpucemkcyg@sgumhhuog.lk",
                "address": "云南省 德宏傣族景颇族自治州 梁河县"
            },
            {
                "user_name": "林刚",
                "mobile": "13565824637",
                "email": "s.syd@ejnzld.fm",
                "address": "新疆维吾尔自治区 哈密地区 巴里坤哈萨克自治县"
            },
            {
                "user_name": "贾军",
                "mobile": "13236761942",
                "email": "o.kujeqklh@nrogi.ma",
                "address": "辽宁省 朝阳市 北票市"
            },
            {
                "user_name": "金涛",
                "mobile": "13275655175",
                "email": "w.yhrp@gopwcj.hr",
                "address": "湖南省 娄底市 涟源市"
            },
            {
                "user_name": "谢秀英",
                "mobile": "13518654711",
                "email": "i.krpcrnf@krcttp.nr",
                "address": "内蒙古自治区 鄂尔多斯市 鄂托克旗"
            },
            {
                "user_name": "尹强",
                "mobile": "18903227487",
                "email": "u.vfadzlsgl@nguqpctwu.ua",
                "address": "宁夏回族自治区 吴忠市 同心县"
            },
            {
                "user_name": "锺艳",
                "mobile": "13524315227",
                "email": "u.eqlgzskps@nnvs.kn",
                "address": "辽宁省 铁岭市 西丰县"
            },
            {
                "user_name": "谢勇",
                "mobile": "18920348045",
                "email": "r.alcauiua@vmgd.lt",
                "address": "福建省 福州市 闽侯县"
            }
        ]
        // 表格初始化方法
        function initTable(){
            $("#content tbody").empty();
            for (let i in students) {
                let deleteBtn$ = $("<input type='button' value='删除'>").click(function (){
                    students.splice(i,1); // 基于下标删除学生信息
                    initTable(); // 基于操作后的数据进行页面的重写渲染
                })
                let editBtn$ = $("<input type='button' value='修改'>").click(function (){
                    // console.log(i,students[i])
                    // 表格修改按钮的三种操作模式
                    //      1. 跳转新页面，提供对应的表单结构，提供数据修改  ==> 对数据量较大的数据
                    //      2. 显示一个固定定位元素，元素内提供对应表单结构，提供数据修改 ==> 模态窗口
                    //                                                         ==> 修改数量较少的情况
                    //      3. 将当前行转换为输入框，提供对应列的表格修改功能，提供数据修改 ==> 可编辑表格
                    //                                                           ==> 少量数据且完全显示
                    // jquery对象的  find(el) 方法，在指定的对象中查找符合选择器的元素
                    $("#editModel").find("#username").val(students[i].user_name)
                    $("#editModel").find("#mobile").val(students[i].mobile)
                    $("#editModel").find("#email").val(students[i].email)
                    $("#editModel").find("#address").val(students[i].address)
                    $("#editModel").prop("studentIndex",i)
                    $("#editModel").css("display","block");
                })
                // for in 循环 经测试 下标 i 返回的是 String 类型
                $("<tr>").append( $("<td>").html( i*1+1 ) )
                    .append( $("<td>").html( students[i].user_name ) )
                    // .append( $("<td>").html( students[i]['user_name'] ) )
                    .append( $("<td>").html( students[i].mobile ) )
                    .append( $("<td>").css("display","none").html( students[i].email ) )
                    .append( $("<td>").css("display","none").html( students[i].address ) )
                    .append( $("<td>").append(deleteBtn$).append(editBtn$) )
                    .appendTo( $("#content>tbody") );
            }
        }
        // 用户修改方法
        function modifyUser(){
            // console.log( $("#editModel").prop("studentIndex") )
            let i = $("#editModel").prop("studentIndex");
            students[i].user_name = $("#editModel #username").val();
            students[i].mobile = $("#editModel #mobile").val();
            students[i].email = $("#editModel #email").val();
            students[i].address = $("#editModel #address").val();
            closeModel();
            initTable();
        }
        $(function (){
            initTable();
            let detailBox$ = null;
            $("#content tbody").mouseover(function (event){
                // console.log( $(event.target).parent() )
                // 通过单元格获取所在行，通过行获取该行所有单元格
                cells = event.target.parentElement.cells;
                if(cells===undefined) return;
                // 当鼠标进入表格标签时创建悬浮元素
                detailBox$ = $("<div>").addClass("row-detail")
                        .append( $(`<div><span>序号 : </span><span>${ cells[0].innerHTML }</span></div>`) )
                        .append( $(`<div><span>姓名 : </span><span>${ cells[1].innerHTML }</span></div>`) )
                        .append( $(`<div><span>手机 : </span><span>${ cells[2].innerHTML }</span></div>`) )
                        .append( $(`<div><span>邮箱 : </span><span>${ cells[3].innerHTML }</span></div>`) )
                        .append( $(`<div><span>地址 : </span><span>${ cells[4].innerHTML }</span></div>`) )
                        .appendTo( document.body )
            }).mousemove(function (event){
                // 悬浮元素跟随移动
                // console.log(event.clientX,event.clientY)
                detailBox$.css({
                    top:event.clientY+10 + "px",
                    left:event.clientX+20 + "px"
                })
            }).mouseout(function (){
                // 当鼠标离开表格标签时删除悬浮元素
                detailBox$.remove();
            })
        })
    </script>
</head>
<body>
    <table id="content">
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>手机</td>
<!--                <td>邮箱</td>-->
<!--                <td>地址</td>-->
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
<!--            <tr>-->
<!--                <td>1</td>-->
<!--                <td>谢勇</td>-->
<!--                <td>18920348045</td>-->
<!--                <td>r.alcauiua@vmgd.lt</td>-->
<!--                <td>福建省 福州市 闽侯县</td>-->
<!--            </tr>-->
        </tbody>
    </table>
<!--    <div class="row-detail">-->
<!--        <div>-->
<!--            <span>序号</span>-->
<!--            <span>xxxxxxx</span>-->
<!--        </div>-->
<!--        <div>-->
<!--            <span>姓名</span>-->
<!--            <span>xxxxxxx</span>-->
<!--        </div>-->
<!--        <div>-->
<!--            <span>手机</span>-->
<!--            <span>xxxxxxx</span>-->
<!--        </div>-->
<!--        <div>-->
<!--            <span>邮箱</span>-->
<!--            <span>xxxxxxx</span>-->
<!--        </div>-->
<!--        <div>-->
<!--            <span>地址</span>-->
<!--            <span>xxxxxxx</span>-->
<!--        </div>-->
<!--    </div>-->

    <!--修改模特窗-->
    <div class="model" id="editModel">
        <div class="content">
            <div>
                <label for="username">姓名</label>
                <input type="text" id="username">
            </div>
            <div>
                <label for="mobile">手机</label>
                <input type="text" id="mobile">
            </div>
            <div>
                <label for="email">邮箱</label>
                <input type="text" id="email">
            </div>
            <div>
                <label for="address">地址</label>
                <input type="text" id="address">
            </div>
            <div>
                <input type="button" value="关闭" onclick="closeModel()">
                <input type="button" value="修改" onclick="modifyUser()">
            </div>
        </div>
    </div>
</body>
</html>